<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
// import { getbanner1, foodshop } from '../../api/home'
const router = useRouter()
const value = ref('')
const active = ref('')
function onClickLeft() {
    console.log(111);
    router.back()
}
</script>


<template>
    <div class="box">
        <van-nav-bar title="通讯" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">



            <div class="top"></div>
            <div class="top1">
                <h4>开通号码</h4>
                <p>开通服务前，请仔细阅读卫星通讯服务的通讯<br>资费、须知及相关服务事项!</p>


                <van-cell-group inset>
                    <van-field v-model="value" label="手机号" placeholder="请输入手机号" />
                </van-cell-group>
            </div>
            <van-cell-group>
                <van-cell title="通讯资费详情" />
            </van-cell-group>

            <van-cell-group>
                <van-cell title="服务包含" />
                <van-cell title="拨号收费" value="1.2/分" />
                <van-cell title="接听收费" value="0.6/分" />
                <van-cell title="时间期限" value="开通手机号永久免费" />
            </van-cell-group>
            <hr>
            <van-cell-group>
                <van-cell title="首次开通" value="￥88" />
            </van-cell-group>
            <div class="top3">
                <h3>通讯说明</h3>
                <p>该服务为增值服务，首次开通费为 ￥88元,后续入园永久免费!</p>
            </div>
            <div class="top4">
                <h3>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请仔细阅读以下条件
                </h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本服务采用卫星通讯提供安全、稳定、可靠的信号传输。使用时请在法律允许范围内使用:</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一、服务采用开通后手机号永久制度，下次入园无需再次开通通讯服务即可正常使用;</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二、拨号及接听费用按照资费表进行收费;</p>
            </div>



            <div class="top4">
                <h3>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请仔细阅读以下条件
                </h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一、服务开通后可能会出现1~10秒的激活延迟，请耐心等待:</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二、服务所接入卫星为XX，请遵守国家相关法律法规:;</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三、使用过程中出现问题，请及时联系客服: XXXX;</p>
            </div>

        </div>
        <footer>
            <van-button type="warning">开通 ￥88</van-button>
        </footer>
    </div>
</template>

<style scoped>
.top {
    width: 90%;
    height: 1.8rem;
    background: url(https://img0.baidu.com/it/u=2056943300,1942119198&fm=253&fmt=auto&app=138&f=JPG?w=1080&h=500) no-repeat 100%/cover;
    border-radius: .2rem;

    margin-left: .15rem;

}

.top1 {
    width: 90%;
    height: 1.5rem;
    background-color: rgba(0, 255, 255, 0.093);
    margin-top: .2rem;
    border-radius: .2rem;
    line-height: .3rem;
    text-align: center;
    margin-left: .15rem;

}

.top3 {
    text-align: center;
    width: 90%;
    margin-left: .15rem;
    border-radius: .1rem;
    background-color: rgba(0, 255, 255, 0.123);
    line-height: .3rem;
    margin-bottom: .2rem;

}

.top4 {
    width: 90%;
    margin-left: .15rem;
    border-radius: .1rem;
    background-color: rgba(0, 255, 255, 0.123);
    line-height: .35rem;
    margin-bottom: .2rem;

}

footer {
    width: 100%;
    text-align: center;
}

.van-button {
    width: 60%;
    border-radius: .2rem
}
</style>